<template>
    <div class="kandan1-friend-help-alert" v-if="members && members.length>0" style="display: none">
        <span>
            <img class="kandan1-friend-userheader" alt=""/>
        </span>
        <span class="kandan1-friend-name"></span>
        <span class="kandan1-content"></span>
    </div>
</template>

<script>
    import xurl from '../../../x/xurl'
    export default {
        name: "showHideMarquee",
        props:{
            // cutModel:{
            //     type:String
            // }
        },
        data(){
            return{
                members:[],
                kandan1I:0,
                timer:{
                    timer1:null,
                    timer2:null
                },
            }
        },
        mounted(){
            //轮播砍价记录
            this.cycleCutRecords();
        },
        beforeRouteLeave(to,from,next){
            clearTimeout(this.timer.timer1)
            clearTimeout(this.timer.timer2)
        },
        methods:{
            cycleCutRecords() {
                var _this = this;
                var speed = 50;
                xurl.get(this.NW_API_vue + '/act/marketing/pump/records?marketingId='+this.$route.params.actMarketingId)
                    .then(data => {
                        if (data.success) {
                            _this.members = JSON.parse(data.result);
                            if (_this.members == null || _this.members.length == 0) {
                                $('.kandan1-friend-help-alert').hide();
                                return;
                            }
                            let left = Math.abs(( Math.random() * 375 / 100 ) - 1.45) + .15 + "rem";
                            let top = ( Math.random() * 100 ) + "%";
                            $('.kandan1-friend-help-alert').css({"left": left, "top": top});
                            $('.kandan1-friend-help-alert').find('.kandan1-friend-userheader').attr('src', _this.members[0].photo);
                            $('.kandan1-friend-help-alert').find('.kandan1-friend-name').text(_this.members[0].name);
                            $('.kandan1-friend-help-alert').find('.kandan1-content').text(
                            _this.members[0].recordType == 1 ? '砍了' + _this.members[0].cutMoney + '元' : '发起了砍价');
                            $('.kandan1-friend-help-alert').show();
                            _this.headerShowHide();
                        }
                    })
            },
            headerShowHide() {
                var _this = this;
                this.timer.timer1 = setTimeout(function () {
                    if ($('.kandan1-friend-help-alert').css("display") != "none") {
                        $('.kandan1-friend-help-alert').fadeOut(300);
                        _this.headerShowHide();
                    } else {
                        _this.timer.timer2 = setTimeout(function () {
                            $('.kandan1-friend-help-alert').find('.kandan1-friend-userheader').attr('src', _this.members[_this.kandan1I].photo);
                            $('.kandan1-friend-help-alert').find('.kandan1-friend-name').text(_this.members[_this.kandan1I].name);
                            $('.kandan1-friend-help-alert').find('.kandan1-content').text(
                            _this.members[_this.kandan1I].recordType == 1 ? '砍了' + _this.members[_this.kandan1I].cutMoney + '元' : '发起了砍价');
                            $('.kandan1-friend-help-alert').fadeIn(300);
                            let left = Math.abs(( Math.random() * 375 / 100 ) - 1.45) + .15 + "rem";
                            let top = ( Math.random() * 100 ) + "%";
                            $('.kandan1-friend-help-alert').css({"left": left, "top": top});
                            _this.headerShowHide();
                            _this.kandan1I++;
                            if (_this.members.length <= _this.kandan1I) {
                                _this.kandan1I = 0;
                            }
                        }, 2000)
                    }
                }, 1000)
            },
        },

    }
</script>

<style scoped lang="scss">
    .kandan1-friend-help-alert{
        white-space: nowrap;
        position: absolute;
        top: .5rem;
        left: .15rem;
        font-size: .11rem;
        padding: 0 .05rem;
        border-radius: 25px;
        background: rgba(0,0,0,.6);
        height: .25rem;
        line-height: .27rem;
        display: flex;
        display: -webkit-flex;
        box-sizing: border-box;
        color: #fff;
    }
    .kandan1-friend-userheader{
        width: .2rem;
        height: .2rem;
        border-radius: 50%;
        position: relative;
        top: 35%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .kandan1-friend-name{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: auto;
        display: inline-block;
        max-width: .8rem;
        margin-left: .05rem;
    }
    .kandan1-price{
        color: #FF5A5A;
        display: inline-block;
        margin-left: .05rem;
        margin-right: .1rem;
    }
</style>